<!-- eslint-disable no-new -->
<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(slide, idx) in skuImageList" :key="slide.id">
        <img :src="slide.imgUrl" :class="{ active: currentIndex == idx }" @click="changeSlide(idx)">
        <div class="text">
          {{slide.text}}
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { ref, getCurrentInstance, watch, nextTick, onMounted } from 'vue'
import Swiper from 'swiper/swiper-bundle.min.js'
export default {
  name: 'ImageList',
  props: ['skuImageList'],
  setup (props) {
    const { ctx } = getCurrentInstance()
    const instance = getCurrentInstance()
    const _this = instance.appContext.config.globalProperties
    const currentIndex = ref(0)
    watch(props.skuImageList, () => {
      nextTick(() => {
        // eslint-disable-next-line no-new
        new Swiper(ctx.$refs.cur, {
          slidesPerView: '6',
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      })
    })
    onMounted(() => {
      // eslint-disable-next-line no-new
      new Swiper(ctx.$refs.cur, {
        // direction: 'vertical', // 垂直切换选项
        // loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 7,
        loopedSlides: 6,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }

        // // 如果需要滚动条
        // scrollbar: {
        //   el: '.swiper-scrollbar'
        // }
      })
    })
    const changeSlide = (idx) => {
      currentIndex.value = idx
      _this.$mybus.emit('getIndex', currentIndex.value)
    }
    return {
      currentIndex,
      changeSlide
    }
  }
}
</script>
<style lang="less" scoped>
.swiper-container {
  display: flex;
  height: 63px;
  width: 600px;
  box-sizing: border-box;
  margin: 0;
  .swiper-slide {
    width: 89px;
    height: 63px;
    margin-right: 17px;
    .text {
      position: absolute;
      top: 70%;
      text-align: center;
      width: 100%;
      height: 40%;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
    }
    img {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      padding: 2px;
      display: block;

      &.active {
        border: 2px solid #f60;
        padding: 1px;
      }
    }
  }
  .swiper-slide:nth-last-child(1) {
    margin: 0;
  }

  .swiper-button-next {
    left: auto;
    right: 0;
    top: 50%;
  }

  .swiper-button-prev {
    left: 0;
    right: auto;
  }

  .swiper-button-next,
  .swiper-button-prev {
    box-sizing: border-box;
    width: 12px;
    height: 56px;
    background: rgba(235, 235, 235, 1);
    border: 1px solid rgba(204, 204, 204, 1);
    top: 5px;
    margin-top: 0;

    &::after {
      font-size: 12px;
    }
  }
}
</style>
